<template>
    <div class="p-add-class">
        <page-title>添加药方文章</page-title>
        <div class="main"> 
            <div class="main-box">
                <div class="group">
                    <span class="name text-right">文章标题：</span>
                    <el-input v-model="form.title" placeholder="请输入标题名称"></el-input>
                </div>
                <div class="group">
                    <span class="name text-right">文章描述：</span>
                    <el-input v-model="form.content_simple" placeholder="请输入标题名称"></el-input>
                </div>
                <div class="group">
                    <span class="name text-right">选择分类：</span>
                    <el-select v-model="form.classVal" placeholder="请选择分类">
                        <el-option
                        v-for="item in optionClass"
                        :key="item.tab_id"
                        :label="item.title"
                        :value="item.tab_id">
                        </el-option>
                    </el-select>
                </div>
                <div class="group clear-both">
                    <span class="name text-right float-left">上封面片：</span> 
                    <div class="float-left ">
                        <update-img @clearImg="clearImg" @change="addImgEvent" :imgUrl="form.imgUrl"></update-img>
                    </div> 
                </div>
                <div class="group clear-both">
                    <span class="name text-right  float-left">文章内容：</span>
                    <div class="float-left ">
                        <editor-txt :content="form.content" @change="onEditorChange"></editor-txt>
                    </div>  
                </div>
                <div class="group">
                    <span class="name text-right">权限设置：</span>  
                    <el-switch v-model="form.level_three" active-text="高级会员可看"></el-switch> 
                    <el-switch v-model="form.level_two" active-text="初级会员可看"></el-switch> 
                    <el-switch v-model="form.level_one" active-text="游客登录可看 "></el-switch> 
                </div>
                <div class="group text-center btn">
                     <el-button type="primary" @click="postData">确定</el-button>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
 import * as api from './../../../api/api'
export default {
    data() {
        return{ 
            form:{
                title:'',
                classVal:'', //分类
                imgUrl:'',
                content:'',
                content_simple:'',
                level_three:true, //高级会员可看
                level_two:true, //初级会员可看
                level_one:true, //游客登录可看
            },
            optionClass:[],
            
        }
    },  
    created() {
        this.getClassList()
    },  
    methods: {
        postData(){
             let vm = this;
            let body={
                model: "Articles",
                data: {
                    title:vm.form.title,
                    thumb:vm.form.imgUrl,
                    content:vm.form.content,
                    content_simple:vm.form.content_simple,
                    uid:sessionStorage.getItem('u_id'),
                    tab_id:vm.form.classVal,
                    level_one:vm.form.level_three?1:0,
                    level_two:vm.form.level_two?1:0,
                    level_three:vm.form.level_one?1:0
                },
                update_condition:{ 
                    article_id:vm.$route.query.preId, 
                },    
            };
            if(vm.regInputData()){
                api.createData(body).then(res=>{
                    if(res.data.code==200){
                        vm.$router.push({name:'methodTextList'});
                        vm.$message({
                            message: '保存成功！',
                            type: 'success'
                        });
                    }
                });
            } 
        },
        getClassList(){
            let vm = this;
            let body={
                model:'Tabs',
                condition:{
                    type:3
                },
                uid:sessionStorage.getItem('u_id')
            };
            api.getDateList(body).then(res=>{
                if(res.data.code==200){
                    res.data.data.data.forEach((resItem,resIndex)=>{
                        if(resItem.resource_type==1){
                            vm.optionClass.push(resItem);
                        }
                    }); 
                }
            });
        },
        //regInputData
        regInputData(){
            if(this.form.title==''){
                this.$message({showClose: true,message: '标题不能为空'});
                return false;
            }else if(this.form.content_simple==''){
                this.$message({showClose: true,message: '描述不能为空'});
                return false;
            }else  if(this.form.classVal==''){
                this.$message({showClose: true,message: '请选择分类'});
                return false;
            }else if(this.form.content==''){
                this.$message({showClose: true,message: '请输入文章内容'});
                return false;
            }else  if(this.form.imgUrl===''){
                this.$message({showClose: true,message: '请上传封面'});
                return false;
            }else  {
                return true;
            }
        },
        //删除上传的图片
        clearImg(){
            this.form.imgUrl='';
        },
        //上传图片
        addImgEvent(val){ 
            this.form.imgUrl=val; 
        },
        //富文本编辑器
        onEditorChange(e){ 
            this.form.content=e;
        },

        getDateInfo(id){
            let vm = this;
            let body={
                model: "Articles",
                condition:{ 
                    article_id: id, 
                }
            };
            api.getDataDetail(body).then(res=>{
                if(res.data.code==200){
                    let data=res.data.data;
                    vm.form={
                        title:data.title,
                        classVal:data.tab_id, //分类
                        imgUrl:data.thumb,
                        content:data.content,
                        content_simple:data.content_simple,
                        level_three:data.level_three==1?true:false, //高级会员可看
                        level_two:data.level_two==1?true:false, //初级会员可看
                        level_one:data.level_one==1?true:false, //游客登录可看
                    }
                    console.log(vm.form);
                }
            });
        },
    }, 
    beforeRouteEnter:function(to,from,next) {    //路由生命周期
        next(vm => { 
            if(vm.$route.query.preId){
                 vm.getDateInfo(vm.$route.query.preId);
            }else{
                vm.$router.go(-1)
            } 
        })
    },
}
</script>

<style lang="scss" scoped>
.p-add-class {
    height:100%;  
    .main{
        padding: 10px 50px; 
        background:#fff;
        .main-box{
            width:80%;
            margin:auto; 
            .group{
                width:100%;
                margin:30px 0;
                .name{
                    display:inline-block;
                    width:110px;
                }
                .el-input{
                    width:222px; 
                }
            }
            .btn{
                padding-top:20px;
            }
        }
    }  
}
</style>
